<template>
  <div class="xss-web1-container">
    <!-- 头部 -->
    <header class="xss-web1-header">
      <div class="header-content">
        <h1 class="site-title">存储型XSS攻击练习-随机练习</h1>
        <div class="flex items-center space-x-4">
          <span class="header-badge">XSS 练习关卡</span>
          <span v-if="flagObtained" class="flag-obtained">
            <i class="fas fa-flag mr-2"></i> FLAG已获取
          </span>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 关卡介绍 -->
      <div class="level-info">
        <h2 class="level-title">关卡：评论区XSS漏洞</h2>
        <p class="level-description">本关卡模拟了一个存在XSS漏洞的评论系统。你的任务是利用这个漏洞，获取管理员的FLAG。</p>
        <div class="bg-gray-900 p-4 rounded border border-gray-700 text-sm">
          <p class="mb-2"><span class="text-yellow-400">提示：</span>尝试在评论框中注入JavaScript代码，看看能否执行。</p>
          <p><span class="text-yellow-400">目标：</span>触发弹窗显示"XSS成功"，获取FLAG。</p>
        </div>
      </div>

      <!-- 评论系统 -->
      <div class="comments-container">
        <!-- 评论表单 -->
        <div class="comment-form-container">
          <h3 class="form-title">发表评论</h3>
          <form @submit.prevent="submitComment" class="space-y-4">
            <div class="form-group">
              <label for="name" class="form-label">昵称</label>
              <input
                  type="text"
                  id="name"
                  v-model="name"
                  class="form-input"
                  placeholder="输入你的昵称"
                  required
              >
            </div>
            <div class="form-group">
              <label for="comment" class="form-label">评论内容</label>
              <textarea
                  id="comment"
                  v-model="comment"
                  class="form-textarea"
                  rows="4"
                  placeholder="输入你的评论..."
                  required
              ></textarea>
            </div>
            <button
                type="submit"
                class="submit-button"
            >
              提交评论
            </button>
          </form>
        </div>

        <!-- 评论列表和反馈 -->
        <div class="comments-list-container">
          <h3 class="comments-list-title">评论列表</h3>

          <!-- 反馈信息 -->
          <div
              v-if="feedback.message"
              :class="`feedback-container ${feedback.type === 'success' ? 'feedback-success' : feedback.type === 'warning' ? 'feedback-warning' : 'feedback-error'}`"
          >
            <div class="feedback-content">
              <div class="feedback-text">
                <p class="feedback-title">{{ feedback.title }}</p>
                <p class="feedback-message">{{ feedback.message }}</p>
                <p v-if="feedback.flag" class="feedback-flag">
                  FLAG: {{ feedback.flag }}
                </p>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div v-for="(comment, index) in comments" :key="index" class="comment-item">
              <div class="comment-header">
                <h4 class="comment-author">{{ comment.name }}</h4>
                <span class="comment-date">{{ formatDate(comment.date) }}</span>
              </div>
              <div v-html="comment.content" class="comment-content"></div>
            </div>
            <div v-if="comments.length === 0" class="no-comments">
              还没有评论，快来发表第一条评论吧！
            </div>
          </div>
        </div>
      </div>

      <!-- 攻击路径指南 -->
      <div class="attack-guide">
        <h3 class="guide-title">
          <i class="fas fa-lightbulb mr-2"></i>攻击路径指南
        </h3>
        <div class="guide-content">
          <div class="guide-section">
            <h4 class="guide-section-title">获取FLAG的正确攻击路径：</h4>
            <ol class="guide-steps">
              <li class="guide-step">在评论框中输入简单的XSS测试 payload：<code class="guide-code">&lt;script&gt;alert('XSS')&lt;/script&gt;</code></li>
              <li class="guide-step">提交评论，观察是否会弹出警告框</li>
              <li class="guide-step">如果基础payload被过滤，尝试变种：<code class="guide-code">&lt;img src=x onerror=alert('XSS成功')&gt;</code></li>
              <li class="guide-step">成功触发弹窗后，系统会返回FLAG</li>
            </ol>
          </div>
          <p class="guide-tip">
            提示：真实环境中的XSS漏洞可能会有各种过滤和防御机制，需要尝试不同的payload变种。
          </p>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="xss-web1-footer">
      <div class="footer-content">
        <p class="footer-text">http://localhost:8080/new_env/flaw_xss12/6sa355534nn0.php</p>
      </div>
    </footer>

    <!-- 模拟弹窗 -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">提示</h3>
          <button @click="showModal = false" class="modal-close">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <p>{{ modalMessage }}</p>
        </div>
        <button
            @click="showModal = false"
            class="modal-button"
        >
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 评论表单数据
      name: '',
      comment: '',

      // 评论列表
      comments: [],

      // 反馈信息
      feedback: {
        message: '',
        title: '',
        type: '', // success, warning, error
        flag: ''
      },

      // 模态框状态
      showModal: false,
      modalMessage: '',

      // 是否获取到FLAG
      flagObtained: false
    };
  },

  methods: {
    // 提交评论
    submitComment() {
      // 模拟评论提交
      const newComment = {
        name: this.name,
        content: this.comment,
        date: new Date()
      };

      this.comments.unshift(newComment);

      // 检查XSS攻击
      this.checkXssAttack(this.comment);

      // 重置表单
      this.name = '';
      this.comment = '';
    },

    // 检查XSS攻击
    checkXssAttack(comment) {
      // 重置反馈
      this.feedback = {
        message: '',
        title: '',
        type: '',
        flag: ''
      };

      // 简单的XSS检测规则
      const scriptTagRegex = /<script\b[^>]*>(.*?)<\/script>/gi;
      const eventHandlerRegex = /on\w+\s*=/gi;
      const javascriptUriRegex = /javascript:/gi;
      const alertRegex = /alert\s*\(/gi;

      // 检查是否包含XSS特征
      const hasScriptTag = scriptTagRegex.test(comment);
      const hasEventHandler = eventHandlerRegex.test(comment);
      const hasJavascriptUri = javascriptUriRegex.test(comment);
      const hasAlert = alertRegex.test(comment);

      // 判断是否成功执行XSS
      const xssSuccess = hasAlert && (hasScriptTag || hasEventHandler || hasJavascriptUri);

      // 特殊检查：是否包含"XSS成功"的弹窗
      const xssComplete = /alert\s*\(\s*['"]XSS成功['"]\s*\)/gi.test(comment);

      if (xssComplete) {
        // 完全成功的XSS攻击，返回FLAG
        this.feedback = {
          title: 'XSS攻击成功！',
          message: '你成功利用了评论系统中的XSS漏洞，获取到了管理员FLAG。',
          type: 'success',
          flag: 'FLAG{XSS攻击-13}'
        };
        this.flagObtained = true;
        this.modalMessage = '恭喜！你成功完成了本次XSS漏洞测试，FLAG已显示在反馈信息中。';
        this.showModal = true;
      } else if (xssSuccess) {
        // 检测到XSS尝试但未达到目标
        this.feedback = {
          title: '检测到XSS尝试',
          message: '你的输入包含可能的XSS攻击代码，并且成功执行了弹窗。但请尝试让弹窗显示"XSS成功"以获取FLAG。',
          type: 'warning'
        };
      } else if (hasScriptTag || hasEventHandler || hasJavascriptUri || hasAlert) {
        // 检测到XSS特征但未成功执行
        this.feedback = {
          title: '检测到潜在的XSS攻击',
          message: '你的输入包含可能的XSS攻击特征，但未成功执行。尝试其他方式绕过防御。',
          type: 'warning'
        };
      } else {
        // 正常评论
        this.feedback = {
          title: '评论提交成功',
          message: '你的评论已成功提交。',
          type: 'success'
        };
      }
    },

    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleString();
    }
  }
};
</script>

<style scoped lang="css" src="@/assets/styles/xssweb1.css"></style>